Membangun Sistem Absensi Online: Integrasi AI Canva (Front End) dengan Google Sheets (Backend)
Di era digital saat ini, kebutuhan akan sistem absensi yang cepat, mudah diakses, dan terintegrasi menjadi sangat penting, terutama bagi lembaga pendidikan. Dalam artikel ini, kita akan membuat sistem absensi online yang modern dan responsif, dengan AI Canva atau HTML sebagai tampilan depan dan Google Sheets sebagai basis data backend menggunakan Google Apps Script.
Apa yang Akan Dibuat?
- Tampilan absensi online berbasis web dengan filter kelas dan tombol kehadiran.
- Backend yang terhubung langsung ke Google Sheet untuk menyimpan data siswa dan mencatat kehadiran.
- Desain responsif dan modern menggunakan Tailwind CSS.
Langkah 1: Siapkan Backend (Google Apps Script)
- Buka Google Spreadsheet buat dua sheet (Siswa dan Absensi)
- Klik menu Ekstensi - Apps Script
- Buka Chat GBT atau Gemini tuliskan prompt berikut:
Buatkan file .gs dengan fungsi doGet(e) sebagai endpoint Web App.1. Konfigurasi Awal:Definisikan sheetId, studentSheetName (contoh: "Siswa"), dan attendanceSheetName (contoh: "Absensi"). Pandu pengguna untuk mengganti sheetId sesuai Spreadsheet mereka.2. GET action = 'getStudentData':- Akses sheet studentSheetName.- Baca data, baris pertama = header (misal: NO, NAMA, NIS, KELAS).- Ubah ke array objek JSON.- Jika sheet kosong atau hanya header, kembalikan [].- Jika sheet tidak ditemukan, kembalikan {"status":"error", "message":"Sheet Data Siswa tidak ditemukan!"}.- Return data JSON sebagai ContentService.createTextOutput(...).setMimeType(...).- GET untuk Absensi (selain getStudentData):- Akses sheet attendanceSheetName.- Ambil & validasi parameter: NO, NAMA, NIS, KELAS, KEHADIRAN, TANGGAL.- Jika tidak lengkap, kembalikan JSON error.- Simpan data ke sheet dengan new Date() sebagai timestamp.- Kembalikan {"status":"success", "message":"Absensi berhasil dicatat!"}.
📌 Ganti sheetId dengan ID Spreadsheet Anda.
Contoh: https://docs.google.com/spreadsheets/d/1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA/edit
ID Spreadsheet adalah: 1CwAIYUB7aelqNe5LKHrJ9xzx1B2mJSiYT03rAdA8fwA
Langkah 2: Buat Front-End (HTML + Tailwind CSS)
Salin prompt di bawah ini untuk minta dibuatkan AI Canva:
Buatkan saya kode HTML lengkap untuk sistem absensi online. Perhatikan poin-poin berikut untuk memastikan fungsionalitas pengiriman data berjalan dengan benar, mengingat masalah respons JSON dari backend yang sering terjadi:
1. Struktur Halaman:
- Sertakan <select> dengan id="classFilter" untuk memfilter kelas dari data siswa.
- Tampilkan tabel dengan id="studentTableBody" yang memiliki kolom: No., Nama, NIS, Kelas, Kehadiran, dan Aksi.
- Setiap baris siswa dalam tabel harus memiliki tombol-tombol H, I, S, A (Hadir, Izin, Sakit, Alfa) untuk mencatat kehadiran.
- Setiap tombol absensi harus memiliki data-attributes berikut: data-no, data-nama, data-nis, data-kelas, dan data-status.
2. Konfigurasi JavaScript:
Definisikan konstanta SCRIPT_URL sebagai endpoint Google Apps Script Anda: https://script.google.com/macros/s/WEBAP-ID/exec.
3. Fungsi Pengambilan Data (fetchStudentData):
- Buat fungsi fetchStudentData() untuk mengambil data siswa dari SCRIPT_URL dengan parameter ?action=getStudentData.
- Setelah menerima respons, validasi bahwa respons adalah array objek JSON yang valid, lalu simpan ke variabel global (misalnya studentsData) dan panggil populateClassFilter() dan renderStudents().
4. Fungsi Filter dan Render (populateClassFilter, renderStudents):
- Implementasikan populateClassFilter() untuk mengisi opsi dropdown filter kelas secara dinamis dari data siswa yang tersedia.
- Implementasikan renderStudents() untuk menampilkan data siswa ke dalam studentTableBody, dengan mempertimbangkan filter kelas yang dipilih.
5. Fungsi Pengiriman Absensi (handleAttendanceClick):
- Buat fungsi handleAttendanceClick(event) yang dipicu saat tombol kehadiran diklik.
- Dalam fungsi ini, ambil data siswa (no, nama, nis, kelas, status) dari event.currentTarget.dataset.
- PENTING - Perbaikan Masalah Respons: Kirim data absensi ke SCRIPT_URL menggunakan permintaan GET dengan parameter yang persis sama dengan yang diharapkan oleh Google Apps Script Anda (doGet(e)). Pastikan semua nama parameter HURUF KAPITAL dan cocok: action=Absensi, NO=..., NAMA=..., NIS=..., KELAS=..., KEHADIRAN=..., (Gunakan KEHADIRAN, bukan STATUS), TANGGAL=... (Pastikan format tanggal YYYY-MM-DD dan disertakan)
- PENTING - Penanganan Respons Backend: Setelah fetch respons dari SCRIPT_URL, parse respons sebagai JSON. Periksa status pengiriman berdasarkan properti status dalam objek JSON yang dikembalikan (misalnya, if (result.status === 'success')). Jangan asumsikan adanya properti success yang berdiri sendiri.
- Perbarui status kehadiran siswa di tabel UI secara real-time setelah pengiriman sukses.
6. Sistem Notifikasi (showMessage):
Buat fungsi showMessage(msg, type) untuk menampilkan notifikasi sukses/gagal yang responsif di bagian atas halaman (gunakan animasi slide-in/fade-out). type bisa 'success' atau 'error'.
7. Desain dan Responsivitas:
- Gunakan Tailwind CSS untuk styling.
- Pastikan tata letak responsif untuk perangkat seluler dan desktop.
- Terapkan gaya modern dan clean, seperti penggunaan kartu, bayangan, dan rounded corners.
- Sertakan indikator loading saat data sedang diambil atau dikirim.
Sistem absensi online ini adalah solusi ringan dan powerful, cocok untuk sekolah atau komunitas kecil. Dengan integrasi antara Canva (atau HTML custom) sebagai front end dan Google Apps Script sebagai backend, Anda bisa membangun sistem real-time tanpa biaya server. Selamat mencoba.
Simak video panduan DISINI.
